$layout-background-color: var(--rz-body-background-color) !default;

// Layout CSS variables

:root {
  --rz-layout-background-color: #{$layout-background-color};
}

.rz-layout {
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
  "rz-header rz-header"
  "rz-sidebar rz-body"
  "rz-footer rz-footer";
  background-color: var(--rz-layout-background-color);

  .rz-body {
    grid-area: rz-body;
    overflow: auto;
  }

  .rz-sidebar {
    grid-area: rz-sidebar;
    position: static;
  }

  .rz-header {
    grid-area: rz-header;
    z-index: 2;
  }

  .rz-footer {
    grid-area: rz-footer;
  }
}

@media (max-width: 768px) {
  body:has(> .rz-layout) {
    overflow-x: hidden;
  }
  
  .rz-header,
  .rz-footer,
  .rz-body {
    width: 100vw;
  }
}